<template>
  <view class="contentDetailsBox">
    <view :class="{ content: true, display: props.display && !display }">{{
      props.content
    }}</view>
    <!-- 是否展示全文按钮 -->
    <text
      class="show"
      v-show="props.display"
      @click.stop="display = !display"
      >{{ display ? '隐藏内容' : '展示全文' }}</text
    >
  </view>
</template>

<!-- 内容展示组件-->
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

//是否展示全部内容
const display = ref<boolean>(false)

//接受父组件传递，内容
const props = defineProps({
  content: { type: String },
  display: {
    type: Boolean,
    default: false,
  },
} as const)

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.contentDetailsBox {
  font-size: 29rpx;
  margin: 15rpx 0;
  .content {
    letter-spacing: 2rpx;
  }
  .display {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3; /* 指定显示的行数 */
    -webkit-box-orient: vertical;
    word-break: break-all; /* 强制英文单词被拆开 */
    overflow-wrap: break-word; /* 在必要时允许长单词内部断行，防止内容溢出容器 */
  }
  .show {
    color: rgb(46, 149, 245);
  }
}
</style>
